<template>
    <view class="cart-item-product">
        <label class="item-radio" v-if="isShowCheckBox" @click.stop="change(isSelect)">
            <custom-checkbox :isSelect="isSelect"></custom-checkbox>
        </label>
        <view class="order-item">
            <view class="css-ordertop">
                <iconsfont customIcons="icon-mendian" size="30" class="css-mendian"></iconsfont>
                <text class="css-mdtxt">{{ productInfo.SupplierName || productInfo.SendUserName }}</text>
            </view>
            <view class="order-item-main" @click="goDetailPage()">
                <view class="order-item-imgs"
                    v-if="productInfo.DetailList && !getAppSet().isHideImg && productInfo.DetailList.length > 1">
                    <view class="img-item" v-for="(item, index) in productInfo.DetailList.slice(0, 3)" :key="index">
                        <image mode="aspectFill" :src="easyGetImgUrl(item.ProductImage)" class="order-item-img"></image>
                    </view>
                </view>
                <view class="order-item-imgs"
                    v-if="productInfo.DetailList && !getAppSet().isHideImg && productInfo.DetailList.length == 1">
                    <view class="img-item" v-for="(item, index) in productInfo.DetailList" :key="index">
                        <image mode="aspectFill" :src="easyGetImgUrl(item.ProductImage)" class="order-item-img"></image>
                    </view>
                    <view class="order-item-name" v-for="(item, index) in productInfo.DetailList">{{
                        item.ProductName
                    }}</view>
                </view>
                <view class="order-item-imgs" v-if="productInfo.DetailList && getAppSet().isHideImg">
                    <text class="pro-text">{{ productInfo.DetailList[0].Name }}</text>
                </view>
                <view class="right">
                    <view class="right-box">
                        <text class="right-box-text" v-if="productInfo.DetailList.length > 4">···</text>
                        <!-- <text class="right-box-text" v-if="productInfo.DetailList.length>4">共{{getTotalNum()}}种</text> -->
                        <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="order-item-price">
                <text class="order-desc-text">{{ productInfo.AddTime }}</text>
                <view class="order-price">
                    <text>订单金额:</text>
                    <text class="price-text">¥{{ getTotalPrice() }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import customCheckbox from "@/components/common/custom-checkbox.vue"
export default {
    components: {
        customCheckbox,
    },
    props: {
        selectData: {
            type: Object,
            default: {},
        },
        productInfo: {
            type: Object,
            default: {},
        },
        isShowCheckBox: {
            type: Boolean,
            default: true,
        },
        orderType: {
            type: Number,
            default: -1,
        },
    },
    data() {
        return {
            isSelect: false,
            subIds: [],
        }
    },
    watch: {
        selectData(e) {
            this.isSelectFn(e)
        },
    },
    mounted() {
        this.isSelectFn(this.selectData)
    },
    methods: {
        getTotalNum() {
            let num = 0
            this.productInfo.DetailList.forEach((e) => {
                num += e.Amount
            })
            return num
        },
        getTotalPrice() {
            let price = this.productInfo.InvoiceMoney
            if (price < 0) {
                return 0.0
            } else {
                return price.toFixed(2)
            }
        },
        select() { },
        change(isSelect) {
            let obj = {
                isSelect: !isSelect,
                OrderId: this.productInfo.OrderId,
                subIds: this.subIds,
                PriceSum: this.productInfo.PriceSum,
            }
            this.$emit("changeCheck", obj)
        },
        getIsSelect(is) {
            return is
        },
        isSelectFn(data) {
            let ids = data.ids

            let subIds = []
            subIds.push(this.productInfo.OrderId)
            this.subIds = subIds
            let newList = []
            subIds.filter((val) => {
                if (ids.includes(val)) {
                    newList.push(val)
                }
            })
            this.isSelect = newList.length > 0 && newList.length == subIds.length
        },
        // 进入订单详情
        goDetailPage() {
            this.easyGoTo(`/pages_shop/packet/order/orderDetail?id=${this.productInfo.OrderId}`)
            // this.easyGoTo(`/pages_supplier/packet/order/orderDetail?id=${this.productInfo.OrderId}`)
        },
    },
}
</script>

<style lang="scss">
@import "style/billOrderItem.scss";

.cart-item-product {
    display: flex;
    background: $color-white;
    // flex-direction: row;
    // align-items: center;
    // border-bottom: solid 1rpx $uni-bg-color-grey;
    padding: $app-page-padding 0;
    border-radius: 10rpx;
    position: relative;
    margin: 20rpx $app-page-padding;

    .item-radio {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
        margin-left: 20rpx;
    }

    .item-img {
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
        border-radius: 8rpx;
    }

    .item-name {
        display: flex;
        flex: 1;
        flex-direction: column;
        font-weight: 700;
        font-size: $font-size-28;
    }
}

.oneSpec {
    border-bottom: none;
    padding: $app-page-padding 0 10rpx;

    .item-radio {
        margin-right: 36rpx;
        margin-left: 12rpx;
    }
}

.unit-btn {
    position: absolute;
    right: 0;
    bottom: 24rpx;
    width: 80rpx;
    height: 32rpx;
    background: #ffffff;
    border-radius: 20rpx;
    border: 1rpx solid #b9c0d0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20rpx;
    color: #333;

    .unit-text {
        margin-right: 10rpx;
    }

    .arrow {
        border: solid $color-gray-3;
        border-width: 0 1px 1px 0;
        padding: 2px;
    }

    .arrow-up {
        margin-top: 8rpx;
    }

    .arrow-down {
        margin-bottom: 5rpx;
    }
}

.css-mendian {
    margin-left: 15rpx;
}

.right {
    .right-box {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;

        .right-box-text {
            color: $color-gray-1;
            font-size: $font-size-24;
            padding-right: 24rpx;
            font-family:
                PingFangSC-Medium,
                PingFang SC;
            font-weight: 500;
            letter-spacing: 2rpx;
        }
    }

    .order-desc {
        color: $app-color-text-tip;
    }
}

.pro-text {
    font-size: $font-size-28;
    font-weight: 600;
}
</style>
